<template>
  <div :class="showMobilePage?'mobile-help-center':''" class="help-center">
    <HelpTop :dialog-key-word="dialogKeyWord" :is-clear-key-word="isClearKeyWord" @getKeyWord="getKeyWord" @setClearKeyWord="setClearKeyWord"/>
    <div class="help-right">
      <HelpSidebar :model-name="modelName" @getName="getName"/>
      <HelpList ref="helpList" :list="list" :list-loading="listLoading" :title="title" :key-word="keyWord" :model-name="modelName" @update="getList(true)" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"/>
    </div>
  </div>
</template>
<script>
import HelpSidebar from '@/components/helpCenter/helpSidebar';
import HelpTop from './model/top';
import HelpList from './model/list';
import { getSideBarData } from '@/components/helpCenter/model/sidebarData';
import { helpList } from '@/api/help';
import getParentName from '@/components/helpCenter/mixins/getParentName';
import { mapState } from 'vuex';

export default {
  components: { HelpTop, HelpSidebar, HelpList },
  mixins: [getParentName],
  data() {
    return {
      modelName: '',
      title: '新手必读',
      dialogKeyWord: '',
      routerName: '',
      keyWord: '',
      isClearKeyWord: false,
      page: 1,
      perPage: 20,
      list: {
        page: 1,
        perPage: 20,
        items: [],
        total: 0
      },
      listLoading: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    sidebarData() {
      const list = getSideBarData();
      return list;
    }
  },
  created() {
    this.dialogKeyWord = this.$route.query.keyWord;
    this.modelName = this.$route.query.model ? this.getParentName(this.$route.query.model) : 'newRead';
    if (this.modelName) {
      this.getTitle(this.modelName);
    }
    const isSearch = this.$route.query.isSearch; // 从弹窗搜索进行跳转进入则不走列表页面create中调用接口的逻辑
    if (!isSearch) {
      this.getList(true);
    }
  },
  methods: {
    setClearKeyWord() {
      this.isClearKeyWord = false;
    },
    getList(reset = false) {
      this.listLoading = true;
      if (reset) this.page = 1;
      const params = {
        page: this.page,
        perPage: this.perPage,
        model: this.modelName,
        keyWord: this.keyWord
      };
      helpList(params).then(res => {
        this.list = res.data;
        this.page = res.data.page;
        this.perPage = res.data.perPage;
        this.listLoading = false;
      }).catch(err => {
        this.listLoading = false;
        console.log(err);
      });
    },
    getTitle(name) { // 用于判断内页跳转则获取该内页的二级侧边栏的title
      for (let i = 0; i < this.sidebarData.length; i++) {
        const element = this.sidebarData[i].children.filter(ele => {
          return ele.name === name;
        });
        if (element.length) {
          this.title = element[0].label;
        } else {
          const childrenName = this.sidebarData[i].children.filter(ele => {
            if (ele.childrenName) {
              return ele.childrenName.indexOf(name) > -1;
            }
          });
          if (childrenName.length) {
            this.title = childrenName[0].label;
          }
        }
      }
    },
    getName(name) {
      if (this.showMobilePage) {
        this.modelName = name;
      } else {
        this.modelName = name === 'newRead' ? name : this.getParentName(name);
      }
      this.isClearKeyWord = true; // 切换侧边栏的时候清空搜索栏信息
      this.getList(true);
      if (name === 'newRead') {
        this.title = '新手必读';
      } else {
        this.getTitle(name);
      }
    },
    getKeyWord(word) {
      this.keyWord = word;
      if (this.keyWord) this.modelName = '';
      this.getList(true);
    },
    handleSizeChange(perPage) {
      this.perPage = perPage;
      this.getList(true);
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
.help-center {
  margin-top: 56px;
  .help-right {
    display: flex;
  }
}
.mobile-help-center {
  padding: 12px 12px 0;
  background-color: #fff;
  .help-right {
    display: block;
  }
  ::v-deep {
    .active-module {
      font-weight: bold;
    }
    .module-box {
       @include scrollBar($x: 'auto', $width: 0px);
    }
  }
}
</style>
